<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 接收父组件传递的数据和事件
const emit = defineEmits(['confirm', 'close'])

// 表格数据
const tableData = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)

// 筛选条件
const filters = reactive({
  carrier: '',
  departureCity: '',
  arrivalCity: ''
})

// 选中的行
const selectedRow = ref(null)

// 获取数据
const fetchFreightList = async () => {
  try {
    const res = await fetch('/api/freight/list', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        ...filters,
        page: currentPage.value,
        size: pageSize.value
      })
    })
    const data = await res.json()
    tableData.value = data.rows || []
    total.value = data.total || 0
  } catch (error) {
    ElMessage.error('加载运费数据失败')
  }
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchFreightList()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchFreightList()
}

// 搜索
const search = () => {
  currentPage.value = 1
  fetchFreightList()
}

// 重置筛选
const resetFilters = () => {
  filters.carrier = ''
  filters.departureCity = ''
  filters.arrivalCity = ''
  search()
}

// 选择单条记录
const selectRow = (row) => {
  selectedRow.value = row
}

// 多选处理
const handleSelectionChange = (val) => {
  if (val.length > 0) {
    selectedRow.value = val[0]
  }
}

// 关闭弹框
const close = () => {
  visible.value = false
  resetFilters()
  selectedRow.value = null
}

// 确认
const confirm = () => {
  if (!selectedRow.value) {
    ElMessage.warning('请先选择一条记录')
    return
  }
  emit('confirm', selectedRow.value)
  close()
}

// 处理关闭前逻辑
const handleClose = () => {
  close()
}

// 控制弹框显示/隐藏
const visible = ref(false)

// 打开弹框
const open = () => {
  visible.value = true
  fetchFreightList() // 加载初始数据
}

// 暴露方法给父组件调用
defineExpose({
  open,
  close
})
</script>

<template>
  <el-dialog
    title="运费选择框"
    v-model="visible"
    width="1200px"
    :before-close="handleClose"
  >
    <div style="display: flex; height: 600px;">
      <!-- 左侧筛选区 -->
      <div style="width: 250px; padding: 20px; border-right: 1px solid #ebeef5;">
        <div style="margin-bottom: 15px; display: flex; gap: 10px;">
          <el-button size="small" @click="resetFilters" icon="Refresh">
            重置
          </el-button>
          <el-button size="small" @click="search" icon="Search">
            搜索
          </el-button>
        </div>

        <el-form :model="filters" label-width="60px">
          <el-form-item label="承运商">
            <el-input v-model="filters.carrier" placeholder="请输入承运商" />
          </el-form-item>
          <el-form-item label="始发城市">
            <el-input v-model="filters.departureCity" placeholder="请输入始发城市" />
          </el-form-item>
          <el-form-item label="到货城市">
            <el-input v-model="filters.arrivalCity" placeholder="请输入到货城市" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 右侧表格区 -->
      <div style="flex: 1; overflow: hidden;">
        <el-table
          :data="tableData"
          style="width: 100%; height: 100%;"
          @selection-change="handleSelectionChange"
          border
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="#" width="50" />
          <el-table-column prop="carrier" label="承运商" />
          <el-table-column prop="departureCity" label="始发城市" />
          <el-table-column prop="arrivalCity" label="到货城市" />
          <el-table-column prop="pricePerKg" label="单公斤运费" />
          <el-table-column prop="pricePerCbm" label="单立方米运费" />
          <el-table-column prop="minPrice" label="最小运费" />
          <el-table-column label="操作" width="80">
            <template #default="{ row }">
              <el-button size="small" @click="selectRow(row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="demo-pagination-block" style="margin-top: 10px;">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

